<template>
  <div class="container">
    <div class="mainWrapper">
      <el-row type="flex" justify="space-between" class="main">
        <el-col :span="4" class="tree">
          <Tree  @handleClickTreeNode="handleClickTreeNode" :propData="treeObj"></Tree>
        </el-col>
        <el-col :span="1" class="line"><el-divider direction="vertical"></el-divider></el-col>
        <el-col :span="19" class="table">       
          <YhFormal v-if="level == 3" :propData="tableObj" @updateZczyXdTree="updateZczyXdTree"></YhFormal>
          <Xlhz v-else-if="level == 1" :propData="tableObj"></Xlhz>
          <XdFormal v-else :propData="tableObj" @updateZczyXdTree="updateZczyXdTree" @updateZczyXlhz="updateZczyXlhz"></XdFormal>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import Tree from "./modules/Tree";
import XdFormal from "./modules/XdFormal";
import YhFormal from "./modules/YhFormal";
import Xlhz from "./modules/Xlhz";
export default {
  data() {
    return {
      level: 0,
      tableObj: {},
      treeObj: {
        isReload: false,
        val: ''
      }
    }
  },

  components: {
    Tree,
    XdFormal,
    YhFormal,
    Xlhz
  },

  computed: {},

  mounted() {},

  methods: {
    handleClickTreeNode(obj) {
      const that = this
      that.level = obj.level
      that.tableObj = JSON.parse(JSON.stringify(obj))
    },
    updateZczyXdTree(val) {
      const that = this
      let treeObj = {
        isReload: true,
        update: val
      }
      that.treeObj = JSON.parse(JSON.stringify(treeObj))
    },
    updateZczyXlhz(obj) {
      const that = this
      that.level = 1
      that.tableObj = JSON.parse(JSON.stringify(obj))
    }
  }
}

</script>
<style lang='scss' scoped>
.container {
  height: 100%;
}
.main {
  height: 100%;
}
.tree {
  height: 100%;
}
.tree .title {
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 5px;
}
.table {
  height: 100%;
}
.line {
  height: 100%;
  text-align: center;
}
.line /deep/ .el-divider {
  height: 100%;
}
.mainWrapper {
  width: 100%;
  height: 100%;
  padding: 5px 10px;
}
</style>
